<template>
	<view class="page">
		<nav-bar>E云教学考试中心</nav-bar>
<!-- <view class="iconfont icon19changyonggongju"></view>
 -->
		<!-- 考试中心 -->
		<u-grid :col="4" class="grid" :border="false">
			<u-grid-item v-for="(item,index) in tab_list" @click="examClick(index)" :key="index">
				<!-- <u-badge :count="item.count" :offset="[20, 20]"></u-badge> -->
				<!-- <u-image width="90rpx" height="90rpx" :src="item.image_src" mode="aspectFit" shape="square"></u-image> -->
				<view class="iconfont" :class="item.iconClass"></view>
				<view class="grid-text-line">
					{{item.content}}
				</view>
			</u-grid-item>
		</u-grid>

		<view class="pracArea">
			<view class="nav">
				<view class="nav-text">
					练习中心
				</view>
			</view>
			<view id="prac-dot" class="">
				<prac-title pracURL="pracIndexKnow">知识点练习</prac-title>
			</view>

			<!-- 题库练习 -->
			<view id="prac-bank" class="">
				<prac-title pracURL="pracIndexBank">题库练习</prac-title>
				<view class="pracContent">
					<prac-bank v-for="(item,index) in bankList" :key="index" v-if="index<4" :bankItem="item">
					</prac-bank>
				</view>
			</view>

			<!-- 模拟考试 -->
			<view id="prac-model" class="">
				<prac-title pracURL="pracIndexModel">模拟考试</prac-title>
			</view>

			<!-- 练习记录 -->
			<view id="prac-record" class="">
				<prac-title pracURL="pracIndexRecord">练习记录</prac-title>
				<view class="pracRecord">
					<prac-record v-for="(item,index) in pracRecordList" :key="index" v-if="index<4"
						:pracRecordItem="item" @recordClick="recordReview"></prac-record>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isMessageShow: false,
				tab_list: [{
					content: '我的考试',
					image_src: "../../static/exam/exam.png",
					iconClass:'icon19changyonggongju',
					detail: 'pages/exam/exam0',
					index: 0
				}, {
					content: '我的成绩',
					image_src: "../../static/exam/examGrade.png",
					iconClass:'icon16bumenguanliguifan',
					detail: 'pages/exam/exam1',
					index: 1
				}, {
					content: '我的笔记',
					image_src: "../../static/exam/examNote.png",
					iconClass:'icon20shejibaiwen',
					detail: 'pages/exam/exam2',
					index: 2
				}, {
					content: '错题本',
					image_src: "../../static/exam/examFault.png",
					iconClass:'icon10changyongwentijieda',
					detail: 'pages/exam/exam3',
					index: 3
				}],
				bankList: [],
				modelList: [],
				pracRecordList: [], // 练习记录
			}
		},
		methods: {
			examClick(index) {
				console.log(index);
				uni.navigateTo({
					url: `/pages/exam/exam${index}`
				})
			},
			pracClick(index) {
				console.log(index);
				uni.navigateTo({
					url: `/pages/exam/prac${index}`
				})
			},
			toPracExamPage() {
				// this.$u.route('/pages/exam/examTextPage', {
				// 	examName: this.examName,
				// 	examTime: this.examTime,
				// })
			},
			// 显示消息
			showMessage() {

			},

			// 显示学习日历
			showCalendar() {}
		},
		onLoad() {
			// var that = this
			// // 获取题库列表
			// this.$api.getBank(1, '')
			// 	.then(res => {
			// 		this.bankList = res.values.records
			// 		return res.values.records
			// 	})

			// // 模拟考试
			// // this.$api.queryPaper()
			// // .then(res=>{
			// // 	// console.log(res.values.records);
			// // 	this.modelList = res.values.records
			// // })

			// // 练习记录
			// this.$api.pracRecord(1, '')
			// 	.then(res => {
			// 		// console.log(res);
			// 		this.pracRecordList = res.values.records
			// 	})
		},
		mounted() {
			var that = this

		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: $uni-bg-color;
		// bottom: var(--window-bottom);
	}

	.nav {
		height: 90rpx;
		background-color: #FFFFFF;
		padding: 5rpx 30rpx;
		display: flex;
		justify-content: space-between;

		.nav-text {
			line-height: 90rpx;
			font-size: 34rpx;
			font-weight: bold;
		}

		.iconArea {
			display: flex;
			align-items: cemter;

			.iconItem {
				margin: 0 10rpx;
			}
		}
	}

	.popArea {
		padding: 30rpx;
	}

	.grid-text-line {
		margin: 50 0rpx;
		font-weight: bold;
	}

	.pracArea {
		background-color: #FFFFFF;
		margin: 20rpx 0;
		display: flex;
		flex-direction: column;

		// bottom: var(--window-bottom);	

		.pracContent {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;

			.pracAreaItem {
				// box-sizing: border-box;
			}
		}

		// .prac-record{
		// 	// bottom: var(--window-bottom);
		// 	.pracAreaItem {
		// 		// box-sizing: border-box;
		// 		bottom: var(--window-bottom);
		// 	}
		// }
	}
</style>
